<template>
  <div class="box">
    <van-list v-model="loading" :finished="finished" @load="onLoad">
      <van-card
        v-for="(item, index) in list"
        :key="item.filmId"
        @click="goto(item.filmId)"
      >
        <template #title>
          <div class="title">
            {{ item.name }}<span>{{ item.item.name }}</span>
          </div>
          <div class="info actors">主演：{{ item.actors | actors }}</div>
          <div class="info">上映日期：{{ item.premiereAt | formatDate }}</div>
        </template>
        <template #thumb class="pic">
          <img :src="item.poster" alt="" />
        </template>
        <template #tags>
          <van-tag
            plain
            type="danger"
            class="sell"
            size="large"
            color="#ffb232"
            :class="set[index]"
            >预约</van-tag
          >
        </template>
      </van-card>
    </van-list>
  </div>
</template>
<script>
import api from '@/api/index.js'
import Vue from 'vue'
import { Card, Tag, Button } from 'vant'

Vue.use(Card)
Vue.use(Tag)
Vue.use(Button)
export default {
  data() {
    return {
      date: '',
      // show: false,
      list: [],
      loading: false,
      finished: false,
      pageNum: 1,
      set: [
        'ss1',
        'ss2',
        'ss3',
        'ss4',
        'ss5',
        'ss6',
        'ss7',
        'ss8',
        'ss9',
        'ss10',
        'ss11'
      ]
    }
  },
  filters: {
    actors: function (val) {
      const arr = val.map((item) => item.name)
      return arr.join(' ')
    },
    formatDate: function (val) {
      // const date = val/24
      // console.log(date)
      // return new Date(parseInt(val) * 1000).toLocaleString()
      // return new Date(val * 1000)
      var a = ['日', '一', '二', '三', '四', '五', '六']
      var date = new Date(val * 1000) // 时间戳10为，要*1000
      var week = date.getDay()
      var str = a[week]
      var month = date.getMonth() + 1
      var day = date.getDate()
      return '星期' + str + '  ' + month + '月' + day + '日'
    }
  },
  methods: {
    onLoad() {
      // 当页面中的组件加载，就会执行一次，以后只要数据到底了，就会再次触发
      // 将请求移动到方法中
      this.$http
        .get(api.getFeature + '?pageNum=' + this.pageNum)
        .then((res) => {
          if (res.status === 0 && res.msg === 'ok') {
            if (this.list.length < res.data.total) {
              this.pageNum++
              this.list.push(...res.data.films)
            } else {
              this.finished = true
            }
            this.loading = false
          }
        })
    },
    goto(id) {
      this.$router.push({
        path: '/movie/detail',
        query: {
          id
        }
      })
    }
  },
  created() {
    // this.$http.get(api.getFeature).then((res) => {
    //   this.list = res.data.films
    // })
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding-bottom: 50px;
}
.van-card__thumb {
  width: 66px;
}
img {
  width: 66px;
}
.sell {
  position: absolute;
  right: 0;
  bottom: 33px;
}
.title {
  color: #191a1b;
  font-size: 16px;
  height: 22px;
  line-height: 22px;
  margin-top: 10px;
  span {
    font-size: 9px;
    color: #fff;
    background-color: #d2d6dc;
    height: 14px;
    line-height: 14px;
    padding: 0 2px;
    border-radius: 2px;
    margin-left: 5px;
    position: relative;
    top: -2px;
  }
}
.info {
  font-size: 13px;
  margin-top: 4px;
  color: #797d82;
}
.actors {
  width: 173px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ss1 {
  display: none;
}
.ss2 {
  display: none;
}
.ss11 {
  display: none;
}
</style>